import { useState } from 'react';
import { Link } from 'react-router-dom';
import { StarIcon, ClockIcon } from 'lucide-react';
import { Pagination } from '../components/Pagination';
import { FilterTabs } from '../components/FilterTabs';
import { usePageTitle } from '../hooks/usePageTitle';
import { ImageWithLoader } from '../components/ImageWithLoader';

export function Reviews() {
  usePageTitle('Appliance Reviews');
  
  const [currentPage, setCurrentPage] = useState(1);
  const [activeCategory, setActiveCategory] = useState('All Reviews');
  const categories = ['All Reviews', 'Kitchen', 'Laundry', 'Climate', 'Security'];
  const allReviews = [{
    id: '1',
    title: 'Bosch Series 8 Smart Oven Review',
    image: 'https://images.unsplash.com/photo-1631679706909-1844bbd07221?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1992&q=80',
    category: 'Kitchen',
    rating: 4.6,
    date: '2 days ago',
    excerpt: 'Precision temperature control and intuitive app make this oven a standout choice for modern kitchens.'
  }, {
    id: '2',
    title: 'Dyson Pure Cool TP07 Air Purifier Review',
    image: 'https://images.unsplash.com/photo-1594142243342-41d20b96e928?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    category: 'Climate',
    rating: 4.8,
    date: '1 week ago',
    excerpt: 'Exceptional filtration with detailed air quality monitoring and voice control capabilities.'
  }, {
    id: '3',
    title: 'Nest x Yale Smart Lock: Long-term Test',
    image: 'https://images.unsplash.com/photo-1582555172866-f73bb12a2ab3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Security',
    rating: 4.5,
    date: '2 weeks ago',
    excerpt: 'After six months of use, this smart lock proves its reliability and convenience for everyday home security.'
  }, {
    id: '4',
    title: 'Samsung Smart Washer-Dryer Combo Review',
    image: 'https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Laundry',
    rating: 4.4,
    date: '3 weeks ago',
    excerpt: 'Space-saving design with AI fabric detection and remote monitoring capabilities for modern homes.'
  }, {
    id: '5',
    title: 'LG InstaView Door-in-Door Refrigerator Review',
    image: 'https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    category: 'Kitchen',
    rating: 4.7,
    date: '1 month ago',
    excerpt: 'Innovative door design and smart features make this refrigerator both practical and impressive.'
  }, {
    id: '6',
    title: 'Ecobee Smart Thermostat Premium Review',
    image: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Climate',
    rating: 4.6,
    date: '1 month ago',
    excerpt: 'AI-powered climate control with room sensors delivers optimal comfort and energy efficiency.'
  }, {
    id: '7',
    title: 'Miele TwinDos Washing Machine Review',
    image: 'https://images.unsplash.com/photo-1610557892470-55d9e80c0bce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80',
    category: 'Laundry',
    rating: 4.8,
    date: '2 months ago',
    excerpt: 'Precision dosing system and intelligent fabric detection for perfect cleaning results every time.'
  }, {
    id: '8',
    title: 'Ring Video Doorbell Pro 2 Review',
    image: 'https://images.unsplash.com/photo-1558002038-1055907df827?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Security',
    rating: 4.5,
    date: '2 months ago',
    excerpt: '3D motion detection with head-to-toe video and enhanced audio quality for complete home monitoring.'
  }, {
    id: '9',
    title: 'KitchenAid Stand Mixer Professional Review',
    image: 'https://images.unsplash.com/photo-1594282486552-05a3b6fbfdb5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80',
    category: 'Kitchen',
    rating: 4.9,
    date: '3 months ago',
    excerpt: 'The gold standard for stand mixers with unmatched power and versatility for serious home bakers.'
  }];
  // Filter reviews by category
  const filteredReviews = activeCategory === 'All Reviews' ? allReviews : allReviews.filter(review => review.category === activeCategory);
  // Pagination logic
  const reviewsPerPage = 6;
  const totalPages = Math.ceil(filteredReviews.length / reviewsPerPage);
  const currentReviews = filteredReviews.slice((currentPage - 1) * reviewsPerPage, currentPage * reviewsPerPage);
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    window.scrollTo(0, 0);
  };
  const handleCategoryChange = (category: string) => {
    setActiveCategory(category);
    setCurrentPage(1);
  };
  return <div className="w-full">
      {/* Hero section */}
      <div className="relative w-full h-80 bg-cover bg-center" style={{
      backgroundImage: 'url("https://images.unsplash.com/photo-1556911261-6bd341186b2f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80")'
    }}>
        <div className="absolute inset-0 bg-black bg-opacity-50"></div>
        <div className="absolute inset-0 flex items-center">
          <div className="container mx-auto px-4">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4 text-center">
              Expert Appliance Reviews
            </h1>
            <p className="text-xl text-white max-w-2xl mx-auto text-center mb-8">
              Comprehensive, hands-on evaluations of the latest smart home
              appliances to help you make informed decisions.
            </p>
            <div className="max-w-md mx-auto">
              <div className="relative">
                <input type="text" placeholder="Search reviews..." className="w-full px-5 py-3 rounded-md focus:outline-none" />
                <button className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-[#d4a373] text-white p-1 rounded">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-5 h-5">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* Filter tabs */}
      <FilterTabs categories={categories} activeCategory={activeCategory} onCategoryChange={handleCategoryChange} />
      {/* Reviews grid */}
      <section className="py-16 bg-[#f8f9fa]">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {currentReviews.map(review => <Link key={review.id} to={`/reviews/${review.id}`} className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                <div className="relative">
                  <ImageWithLoader src={review.image} alt={review.title} className="w-full h-48 object-cover" />
                  <div className="absolute top-4 left-4">
                    <span className="bg-[#343a40] text-white text-xs px-2 py-1 rounded">
                      {review.category}
                    </span>
                  </div>
                </div>
                <div className="p-5">
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center">
                      <StarIcon size={16} className="text-[#ffd166] fill-[#ffd166]" />
                      <span className="ml-1 text-sm font-medium">
                        {review.rating}/5
                      </span>
                    </div>
                    <div className="flex items-center text-gray-500 text-xs">
                      <ClockIcon size={14} className="mr-1" />
                      <span>{review.date}</span>
                    </div>
                  </div>
                  <h3 className="font-bold text-lg mb-2 line-clamp-2 h-14">
                    {review.title}
                  </h3>
                  <p className="text-gray-600 text-sm mb-3 line-clamp-2 h-10">
                    {review.excerpt}
                  </p>
                  <span className="text-[#d4a373] text-sm font-medium">
                    Read full review
                  </span>
                </div>
              </Link>)}
          </div>
          {/* Pagination */}
          {totalPages > 1 && <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} />}
        </div>
      </section>
    </div>;
}